import React from "react";
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import { useRequestAllChannelsQuery, useRequestUserChannelsQuery } from "@service/channel";
import Item from "@pages/home/widgets/updateUserChannel/widgets/unselected/Item";

export default function Unselected() {
    // 获取所有频道列表
    const { data: all, isSuccess: allIsSuccess } = useRequestAllChannelsQuery(undefined);
    // 获取用户频道列表
    const { data: user, isSuccess: userIsSuccess } = useRequestUserChannelsQuery(undefined);

    // 如果所有频道列表或者用户频道列表没有获取成功, 阻止程序继续运行
    if (!allIsSuccess || !userIsSuccess) return null;

    // 获取用户未选择的频道列表
    const unSelectedChannels = all.data.channels.filter(
        (ac) => typeof user.data.channels.find((uc) => uc.id === ac.id) === "undefined"
    );
    return (
        <>
            <div className={styles.title}>
                <h3>可选频道</h3>
            </div>
            <div className={styles.list}>
                {unSelectedChannels.map((channel) => (
                    <Item key={channel.id} channel={channel} seq={user.data.channels.length} />
                ))}
            </div>
        </>
    );
}